<!doctype html>
<html lang="en" ng-app="app">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="../css/normalize.css">
    <link rel="stylesheet" href="../css/reset.css">
    <script src="../js/angular.min.js"></script>
    <script src="../js/angular-ui-router.js"></script>
    <title>Document</title>
    <style>
        html{
            background: #EEEEEE;
        }
        body{
            width: 100%;
            height: 100%;
        }
        .title{
            width: 100%;
            height: 3.5rem;
            line-height: 3.5rem;
            text-align: center;
            background: white;
            display: flex;
            justify-content: space-between;
            position: fixed;
            top: 0;
        }
        .title span{
            font-size: 18px;
        }
        .title div{
            height: 100%;
            display: flex;
            justify-content: center;
            flex-direction: column;
        }
        .title div:first-child{
            margin-left: 1rem;
        }
        .title div:last-child{
            margin-right: 1rem;
        }
        .title div a{
            height: 100%;
            display: flex;
            justify-content: center;
            flex-direction: column;
        }
        .title div img{
            width: 40px;
            height: 60%;
        }
        .banner{
            width: 100%;
            height: 20rem;
            margin-top: 3.5rem;
        }
        .banner img{
            width: 100%;
            height: 100%;
        }
        .content{
            width: 100%;
            height: 180px;
            background: white;
        }
        .content p{
            width: 95%;
            padding-left: 5%;
        }
        .content p:first-child{
            font-size: 18px;
            font-weight: 600;
        }
        .content p:nth-child(2){
            margin-top: 0.5rem;
            color: deeppink;
            font-size: 18px;
        }
        .content p:nth-child(3){
            margin-top: 0.5rem;
            line-height: 1.5rem;
            color: grey;
        }
        .content p:nth-child(4){
            margin-top: 2rem;
            color: grey;
            font-size: 17px;
        }
        .introduce{
            width: 100%;
            background: white;
            margin-top: 1rem;
        }
        .imgText{
            width: 50%;
            border-right: 1px solid grey;
        }
        .comment{
            width: 50%;
        }
    </style>
</head>
<body ng-controller="show">
<div class="title">
    <div>
        <a href="../index.html">
            <img src="../img/left.png" alt="">
        </a>
    </div>
    <span>收藏品详情</span>
    <div>
        <img src="../img/分享.png" alt="">
    </div>
</div>
<div class="banner">
    <img ng-src="../{{obj.image}}" alt="">
</div>
<div class="content">
    <p>
       {{obj.title}}
    </p>
    <p>
        {{obj.price | currency : "￥"}}
    </p>
    <p>
        {{obj.cont}}
    </p>
    <p>
        材质：<img ng-repeat="i in obj.caizhi" ng-src="../{{i.image}}" alt="">
        工艺：<img ng-repeat="i in obj.gongyi" ng-src="../{{i.image}}" alt="">
        性价比：<img ng-repeat="i in obj.xingjiabi" ng-src="../{{i.image}}" alt="">
    </p>
</div>
<div class="introduce">
    <div style="text-align:center;width: 100%;height: 3rem;line-height: 3rem;display: flex;justify-content: space-between;color: #cccccc;font-size: 17px">
        <div class="imgText" ui-sref="imgText">
            图文介绍
        </div>
        <div class="comment" ui-sref="comment">
            评论
        </div>
    </div>
    <div ui-view="">

    </div>
</div>
</body>
<script>
    var app = angular.module("app",["ui.router"]);

    app.config(["$stateProvider","$urlRouterProvider",function ($stateProvider,$urlRouterProvider) {
        $urlRouterProvider.when("","/imgText");

        $stateProvider
            .state("imgText",{
                url : "/imgText",
                templateUrl : "imgText.html",
                controller : "imgTextMsg"
            })
            .state("comment",{
                url : "/comment",
                templateUrl : "comment.html",
                controller : "commentMsg"
            })
    }]);

    app.controller("show",["$scope","$http",function ($scope,$http) {
        $http.get("../json/index.json").success(function (data) {
            $scope.obj = data.jingpin[0].more;
            console.log($scope.obj)
        })
    }]);

    app.controller("imgTextMsg",["$scope","$http",function ($scope,$http) {
        $http.get("../json/index.json").success(function (data) {
            $scope.obj = data.jingpin[0].more.tuwenjieshao
        })
    }]);

    app.controller("commentMsg",["$scope","$http",function ($scope,$http) {
        $http.get("../json/index.json").success(function (data) {
            $scope.arr = data.jingpin[0].more.pinglun
        })
    }])
</script>
</html>